<template>
  <el-header class="sticky">
    <!-- <div class="line"></div> -->
    <el-menu
      :default-active="$route.path"
      class="items-center"
      mode="horizontal"
      @select="handleSelect"
      background-color="rgb(55, 65, 81)"
      text-color="rgb(162, 161, 159) !important"
      active-text-color="#ffd04b"
      :router="true"
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="/message">消息中心</el-menu-item>
      <el-menu-item index="/hook">订单管理</el-menu-item>
      <el-menu-item index="/loginCn" class="menu-item-right"
        ><el-button type="primary" icon="el-icon-user-solid"
          >登录</el-button
        ></el-menu-item
      >
    </el-menu>
  </el-header>
</template>

<script>
export default {
  data() {
    return {
      linkList: [
        {
          path: "/",
          name: "首页",
        },
        {
          path: "/product",
          name: "产品",
        },
        {
          path: "/about",
          name: "关于我们",
        },
      ],
    };
  },
};
</script>

<style scoped>
.items-center {
  align-items: center !important;
}
.sticky {
  position: sticky !important;
}
.flex {
    display: flex!important;
}
.el-header {
  background-color: #374151;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.menu-item-right {
  float: right !important;
  /* 使用!important覆盖element-ui默认样式 */
}
</style>